﻿body {
	background-color : white;
	background-image : url("img/bk.png");
	background-repeat : no-repeat;
	background-position : 56px 0px;
	margin : 0px;
}

#left-banner {
	background-image : url("img/leftBanner.png");
	width : 86px;
	height : 495px;
	page-break-after : avoid;
	display : inline-block;
	overflow : hidden;
}

#top-banner {
	background-image : url("img/topBanner.png");
	left : 86px;
	top : 0;
	width : 712px;
	height : 89px;
	display : block;
	position : absolute;
}

#main-board {
	position : absolute;
	left : 86px;
	top : 89px;
	width : 712px;
	height : 406px;
}

#rhyme-catalog-select-area {
	position : absolute;
	width : 32px;
	left : 6px;
	top : 190px;
}

#cp-name-select-area {
	position : absolute;
	left : 48px;
	top : 190px;
	width : 32px;
}

#left-banner *.vertical-text {
	color : white;
	font-family : "楷体_gb2312","AR PL UKai CN","楷体";
	font-size : 24px;
	text-align : center;
}

.selector {
	border-style : solid;
	border-width : 1px;
	border-color : gray;
	background-image : url("img/sel-bk.png");
	cursor : pointer;
}

.selector:hover {
	background-image : url("img/sel-focus-bk.png");
}

#title-editor {
	font-family : "黑体";
	font-size : 28px;
	text-align : center;
	margin-top : 8px;
	margin-bottom : 8px;
}

#instant-edit-container {
	font-family : "宋体";
	font-size : 16px;
	text-align : right;
	margin-top : 10px;
	margin-bottom : 0px;
	margin-right : 8px;
	float : right;
}

#content-editor-container {
	width: 100%;
}

#content-editor {
	position : absolute;
	top : 48px;
	width : 688px;
	height : 260px;
	margin-left: 10px;
	margin-right: 10px;
	margin-top : 0px;
	margin-bottom : 0px;
	border : 1px solid black;
	background-color : transparent;
	overflow : hidden;
	font-family: "楷体", "AR PL UKai CN";
	font-size : 24px;
	line-height : 32px;
	letter-spacing: 0px;
	padding:0px;
	ime-mode: active;
}

#format-shower {
	position : absolute;
	top : 48px;
	width : 688px;
	height : 260px;
	margin-left: 10px;
	margin-right: 10px;
	margin-top : 0px;
	margin-bottom : 0px;
	padding : 0px;
	border : 1px solid #BBCCDD;
	font-family: "楷体_gb2312","AR PL UKai CN","楷体";
	font-size : 24px;
	padding : 1px;
}

#format-shower p {
	margin : 0px;
}

#format-shower span {
	display: inline-block;
	margin : 0px;
}

.grid {
	color : #FFFFFF;
	letter-spacing: 0px;
	line-height : 32px;
}

.ping-sheng-grid {
	background-color : #B0C0FF;
}

.zhe-sheng-grid {
	background-color : #EEC8B8;
}

.zhong-sheng-grid {
	background-color : #E0E0E0;
}

.literal-grid {
	white-space: pre;
	color : gray;
	border-color : white;
}

.rhyme-grid {
	background-image: url("img/rhyme-flag.png");
	background-position: bottom center;
	background-repeat: no-repeat;
	/* letter-spacing: -1px; */
}

.redundantUnmatch, .spaceUnmatch, .punctUnmatch, .zheUnmatch, .pingUnmatch {
	background-image: url("img/error-flag.png");
	background-position: right bottom;
	background-repeat: no-repeat;
}

.redundantUnmatch.rhyme-grid,
.spaceUnmatch.rhyme-grid,
.punctUnmatch.rhyme-grid,
.zheUnmatch.rhyme-grid,
.pingUnmatch.rhyme-grid,
.rhymeRepeatUnmatch.rhyme-grid,
.rhymeDisobeyUnmatch.rhyme-grid,
.rhymeCandidateUnmatch.rhyme-grid,
.rhymeUnknownUnmatch.rhyme-grid {
	background-image: url("img/rhyme-error-flag.png");
	background-position : bottom right;
	background-repeat: no-repeat;
}

.punctMatch.grid {
	color : white;
}

.unknownMatch.grid {
}

.zhongMatch.grid {
	color : #E0E0E0;
}

.zheMatch.grid {
	color : #EEC8B8;
}

.pingMatch.grid {
	color : #B0C0FF;
}

#cause-panel {
	position : absolute;
	top : 48px;
	width : 688px;
	height : 260px;
	margin-left: 11px;
	margin-right: 10px;
	margin-top : 1px;
	margin-bottom : 0px;
	padding : 0px;
	font-family: "楷体", "AR PL UKai CN";
	font-size : 24px;
	padding : 1px;
	background-color: transparent;
}

#cause-panel .cause-grid {
	position: absolute;
	width : 12px;
	height : 12px;
	z-index: 100;
	cursor: pointer;
	background-image: url("img/transparent.png");
}

#cause-panel .cause-grid.expanded {
	position: absolute;
	max-height: 250px;
	max-width: 300px;
	width: auto;
	height: auto;
	z-index: 100;
	cursor: default;
	background-image: url("img/transparent.png");
}

.cause-grid .cause-content {
	width : 100%;
	height : auto;
	border-collapse: collapse;
	border-spacing: 0px;
	margin : 0px;
	padding: 0px;
}

.cause-content .top-decoration-row {
	height : 12px;
}

.cause-content .left-top-placeholder {
	width : 12px;
	margin: 0px;
	cursor: pointer;
}

.cause-grid .decoration-border {
	background-image: url('img/border.png');
	background-repeat: repeat-x;
	background-color: #EEEE77;
	height: 12px;
	width : auto;
	min-width: 100px;
}

.cause-grid .content-block {
	background-color : #EEEE77;
}

.cause-grid .content-block .title {
	font-family: '黑体';
	font-size: 16px;
}

.cause-grid .content-block .text {
	font-family: '楷体', "AR PL UKai CN";
	font-size: 16px;
}

#cp-info-banners {
	position : absolute;
	height : auto;
	width : 100%;
	bottom : 0;
	background-image : url("img/sum-bk.png");
	margin : 0;
	border : 1px solid silver;
}

.text-inner-title {
	font-weight : bold;
}

.paragraph-with-title {
	margin-top : 0px;
	margin-bottom : 0px;
	padding-top : 0px;
	padding-bottom : 0px;
	line-height : 1.2em;
}

.popup-block {
	border : 1px solid silver;
	background-color : #EEEE99;
	overflow : auto;
}

.selectable-item:hover {
	background-color: #DDDDDD;
	cursor: pointer;
}

#cp-select-dialog {
	position : absolute;
	left : 81px;
	top : 190px;
	width : 600px;
	height : 300px;
}

.ci-tag-name {
	display : inline-block;
	width : 30%;
}

#rhyme-kind-content {
	position: absolute;
	left : 40px;
	top : 248px;
	max-width: 400px;
	min-height: 60px;
}

.rhyme-kind-item {
	font-family: 黑体;
	font-size : 24px;
}

#rhyme-catalog-content {
	position : absolute;
	left : 40px;
	top : 90px;
	width : 600px;
	height : 393px;
}

.rhyme-dept-title {
	margin-top: 0.8em;
}

.rhyme-tone-title {
	display : inline-block;
	min-width: 100px;
	margin-left: 25px;
}

.rhyme-tone-title .name{
	font-weight: bold;
	margin-right: 10px;
}

.rhyme-tone-title .descript{
}

.rhyme-tone-title-block {
	display : inline-block;
}
